<!--个人中心页面-->
<template>
<!-- 左边div  头像-->
  <div class="container">
    <div style="width: 50%;height: 730px;
     background-image:url(/image/login/bg3.jpg);background-position: center top; background-repeat: no-repeat; background-size: contain;
     margin-top: -20px;margin-left: -120px; float: left;">
      <el-col :span="12" style="margin-top: 55px">
        <!-- 显示用户的头像-->
        <el-image class="rounded-avatar" :src="baseUrl+user.imgUrl" style="margin-left: 320px"></el-image>
      </el-col>
      <el-col :span="12">
      </el-col>
    </div>
    <div  style="background-color: white; width: 50%; height: 730px;
     margin-top: -20px;margin-left: -20px;padding: 0 10px; float: right;">
      <!-- 右边的内容 -->
      <el-row>
        <el-col style="padding-top: 20px"><span style="font-size: large;font-weight: bold;">个人信息页面管理</span>
          <el-icon style="padding-left: 500px;" size="30px" @click="changeMessage"><Setting /></el-icon></el-col>
        <!--添加一条黑线-->
        <el-divider style="font-weight: bold;border-width: 4px;border-color: black"></el-divider>
      </el-row>
     <!--昵称-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">昵称</el-col>
        <el-col :span="20" style="font-size: large">{{user.username}}</el-col>
      </el-row>
     <!--性别-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">性别</el-col>
        <el-col :span="20" style="font-size: large" >{{user.gender}}</el-col>
      </el-row>
     <!--身高-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">身高</el-col>
        <el-col :span="20" style="font-size: large">{{user.height}}cm</el-col>
      </el-row>
     <!--体重-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">体重</el-col>
        <el-col :span="20" style="font-size: large">{{user.weight}}kg</el-col>
      </el-row>
     <!--出生日期-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">出生日期</el-col>
        <el-col :span="20" style="font-size: large">{{user.birthday}}</el-col>
      </el-row>
     <!--联系方式-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">联系方式</el-col>
        <el-col :span="20" style="font-size: large">{{user.phone}}</el-col>
      </el-row>
     <!--邮箱-->
      <el-row style="margin-top: 5px">
        <el-col :span="4" style="font-size: large">电子邮箱</el-col>
        <el-col :span="20" style="font-size: large">{{user.email}}</el-col>
        <!--添加一条黑线-->
        <el-divider style="font-weight: bold;border-width: 4px;border-color: black"></el-divider>
      </el-row>
      <el-row>
        <el-col style="padding-top: 20px"><span style="font-size: large;font-weight: bold;" @click="navigateToAddresses">收货地址管理<el-icon style="padding-left: 540px;" size="30px"><Setting /></el-icon></span></el-col>
        <!--添加一条黑线-->
        <el-divider style="font-weight: bold;border-width: 4px;border-color: black"></el-divider>
      </el-row>
      <el-row>
        <el-col :span="6" style="font-size: large"><el-icon style="color: royalblue;padding-right: 10px;padding-top:10px" size="20px"><CircleCheck /></el-icon>收货地址</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-card style="width: 700px" >
          <el-table :data="address">
            <el-table-column :span="4" style="font-size: large" prop="username" label="收货人"></el-table-column>
            <el-table-column :span="4" style="font-size: large" prop="province" label="省" ></el-table-column>
            <el-table-column :span="4" style="font-size: large" prop="city" label="市" ></el-table-column>
            <el-table-column :span="18" style="font-size: large" prop="district" label="区" ></el-table-column>
            <el-table-column :span="18" style="font-size: large" prop="address" label="地址" ></el-table-column>
            <el-table-column :span="18" style="font-size: large" prop="phone" label="电话" ></el-table-column>
          </el-table>
        </el-card>
      </el-row>
    </div>
  </div>

<!--修改信息弹窗-->
  <el-dialog v-model="dialogVisible" style="width: 800px;height: auto">
    <span style="font-size: 30px;">{{title}}</span>
    <el-form label-position="top" style="margin-top: 10px">
      <el-form-item label="头像">
        <el-upload
            v-model:file-list="fileList"
            v-model:action="actionUrl"
            name="file"
            limit="1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input placeholder="请输入昵称" style="width: 40%" v-model="updateUserData.username"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="updateUserData.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身高">
        <el-input placeholder="请输入身高,单位cm" style="width: 20%" v-model="updateUserData.height"></el-input>
      </el-form-item>
      <el-form-item label="体重">
        <el-input placeholder="请输入体重,单位kg" style="width: 20%" v-model="updateUserData.weight"></el-input>
      </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="updateUserData.birthday"
          ></el-date-picker>
        </el-form-item>
      <el-form-item label="邮箱">
        <el-input placeholder="请输入邮箱" style="width: 70%" v-model="updateUserData.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input placeholder="请输入手机号" style="width: 70%" v-model="updateUserData.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input placeholder="请输入验证码" style="width: 20%" v-model="updateUserData.captcha"></el-input>
        <el-button type="primary" plain style="margin-left: 10px" @click="getCaptcha">点击获取验证码</el-button>
      </el-form-item>
    </el-form>
    <div class="button-container">
      <el-button type="primary" style="font-size: 15px;width: 200px" @click="userMessageEdit">完成</el-button>
      <el-button type="primary" style="font-size: 15px;width: 200px" @click="CancelChange">取消</el-button>
    </div>
  </el-dialog>

</template>

<script setup>

//定义变量用于存储当前用户的数据
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const baseUrl = getBaseUrl();
//定义变量用于控制窗口的标题
const title = ref("编辑信息");

const BASE_URL = getBaseUrl();

//使用localstorage获取当前用户登录的信息
const userData = getUser();
const userId = ref("")

//定义变量用于存储当前用户的数据
const user = ref({})

//通过userId向后端发送数据查询当前用户的信息
const queryMessage =()=>{
  userId.value=userData.id;
  axios.get(BASE_URL+'/v1/user/queryMessage/'+userId.value).then((response)=>{
    if(response.data.code===2000){
      //将数据赋值给user
      user.value=response.data.data[0];
      //对gender进行判断
      if(user.value.gender === "1"){
        user.value.gender="女"
      }else if(user.value.gender === "0" ){
        user.value.gender="男"
      }
    }else{
      ElMessage.error("用户信息查询失败!");
    }
  })
}

//定义收货地址数组
const address = ref([])
//定义方法向后端发送请求获取地址数据
const selectAddress =()=>{
  userId.value=userData.id;
  let data = qs.stringify({
    userId:userData.id
  })
  axios.get(BASE_URL+"/v1/user/selectAddress?"+data).then((response)=>{
    if(response.data.code===2000){
      //将返回的结果赋值到addressList
      address.value=response.data.data;
      console.log(address);
      console.log(address.value[0].username);
    }
  })
}
onMounted(()=>{
  //挂载查询地址方法
  selectAddress();
  //挂载查询用户信息方法
  queryMessage();
})

//定义变量用于控制修改信息弹窗
const dialogVisible = ref(false);
//定义方法用于点击修改信息
const changeMessage =()=>{
  //数据回显
  updateUserData.value=user.value;
  //更改弹窗的值
  dialogVisible.value=true;
}
//定义对象用于存储更新的个人用户信息数据
const updateUserData = ref({
  username:'',
  gender:'',
  birthday:'',
  email:'',
  phone:'',
  height:'',
  weight:'',
  captcha:'',
  imgUrl:''
})

//定义方法用于向后端发送修改个人用户信息
const userMessageEdit =()=>{
  if(fileList.value.length>=1){
    updateUserData.value.imgUrl=fileList.value[0].response.data;
  }
  //使用qs将数据转为字符串
  let data = qs.stringify(updateUserData.value);
  axios.post(BASE_URL+"/v1/user/messageEdit/",data).then((response)=>{
    if(response.data.code===2000){
      //提示用户信息更新成功
      ElMessage.success("信息修改成功!")
      //关闭弹窗
      dialogVisible.value=false;
      //重新加载个人信息
      queryMessage();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义方法用于关闭弹窗
const CancelChange =()=>{
  //提示用户确认要关闭弹窗
  if(confirm("确认要取消修改吗？")){
    //清空表单的数据
    updateUserData.value={};
    //关闭弹窗
    dialogVisible.value=false;
  }
}

//定义方法用于跳转到更新收货地址页面
const navigateToAddresses =()=>{
  router.push('/Addresses');
}

//定义方法用于获取验证码
const getCaptcha = ()=>{
  //向后端发送请求获取验证码
  axios.get(BASE_URL+"/v1/user/generateCaptcha/"+updateUserData.value.phone).then((response)=>{
    if(response.data.code===2000){
      console.log(response.data.data);
    }
  })
}

const dialogImageUrl = ref('');
const fileList = ref([]);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/delete?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}

//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
}

const actionUrl = BASE_URL+'/v1/file/upload';



</script>



<style scoped>
/*头像框类*/
.rounded-avatar {
  border: 1px solid white;
  border-radius: 50%;
  width: 150px; /* 设置宽度 */
  height: 150px; /* 设置高度 */
  object-fit: cover; /* 确保图片填充整个容器 */
  margin-left: 230px;
  margin-top: 200px;
}
.button-container{
  display: flex;
  justify-content: center;
  gap: 10px;
}

.container {
  display: flex;
  margin-left: -20px;
  margin-top: -20px;
  width: 120%;
  height: 100%;
  background-color: #fff;
}
</style>